<template>
    <div id="personalCenter">
        <div class="top-introduce">
          <div class="user-info">
            <div class="user-info-left">
              <img
                class="user-head"
                src= "../../../../assets/img/user/userHead.png"
                alt="用户头像">
              <span class="sex">男</span>
            </div>
            <div class="user-info-right">
              <p class="username">用户名</p>
              <p class="user-introduce">个人介绍：<span>嘿嘿嘿额嘿嘿嘿额嘿嘿嘿额嘿嘿嘿额嘿嘿嘿额嘿嘿嘿额嘿嘿嘿额</span></p>
              <router-link
                to="/personalCenter.html/integralDetail"
              >
                <p class="integral">积分&nbsp;&nbsp;&nbsp;&nbsp;529</p>
              </router-link>
            </div>
          </div>
          <div class="user-change">
            <router-link to="/personalCenter.html/changePass">
              <p
                class="password-change"
                @click="currContent='changePass'"
              >修改密码</p>
            </router-link>
            <router-link to="/personalCenter.html/chaPerData">
              <p
                class="personal-info-change"
                @click="currContent='chaPerData'"
              >编辑资料</p>
            </router-link>
          </div>
        </div>
        <div class="aside">
          <div class="aside-top-info">
            <router-link :to="{path:'/personal/relatedUser',query:{currPage : 'myFollower'}}">
              <div
                class="my-follower"
                :class="{p_active : currContent==='myFollower'}"
                @click="currContent='myFollower'"
              >
                <p>我关注的人</p>
                <span>23</span>
              </div>
            </router-link>

            <router-link :to="{path:'/personal/relatedUser',query:{currPage : 'myFans'}}">
              <div
                class="my-fans"
                :class="{p_active : currContent==='myFans'}"
                @click="currContent='myFans'"
              >
                <p>我的粉丝</p>
                <span>222</span>
              </div>
            </router-link>
          </div>
          <div class="aside-bottom-info">
            <router-link to="/personal/classItem">
              <p
                :class="{p_active : currContent==='classItems'}"
                @click="currContent='classItems'"
                class="my-follow-class">
                关注的课程 <span>5</span>
              </p>
            </router-link>
            <router-link to="/personal/myFollowPost">
              <p
                :class="{p_active : currContent==='myFollowPost'}"
                @click="currContent='myFollowPost'"
                class="my-follow-post">
                关注的帖子 <span>24</span>
              </p>
            </router-link>
            <router-link to="/personal/myDynamic">
              <p
                :class="{p_active : currContent==='myDynamic'}"
                @click="currContent='myDynamic'"
                class="my-dynamic">
                我的动态 <span>230</span>
              </p>
            </router-link>
          </div>
        </div>
        <!-- 改变的地方 -->
        <div class="content">
          <router-view
            class="content-wrap"
            currPage="personalCenter"
            name="content"
          ></router-view>
        </div>
        <!-- 修改密码的时候使用 -->
        <div class="user-content">
          <router-view
            class="content-wrap"
            currPage="personalCenter"
            name="user"
          ></router-view>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'personalCenter',
    data () {
      return {
        currContent : 'myDynamic'
      }
    },
    mounted () {
    },
    watch : {
      $route(to, from) {
        window.scrollTo(0,170);
      }
    }
  }
</script>

<style scoped>
  /*sideNav开始*/
  #personalCenter>div{
    background-color: white;
    float: left;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  /* aside开始 */

  /* 数量共有 */
  .aside {
    float: right;
    width: 250px;
    height: fit-content;
    margin-left: 10px;
    position: fixed;
    -webkit-transform: translateX(950px);
    -moz-transform: translateX(950px);
    -ms-transform: translateX(950px);
    -o-transform: translateX(950px);
    transform: translateX(950px);
  }
  .aside .aside-top-info  {
    height: 100px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #edeeef;
  }
  .aside-top-info .my-follower:hover,
  .aside-top-info .my-fans:hover {
    color: white;
    cursor: pointer;
    background-color: #8bbb4e;
  }
  .aside-top-info .p_active {
    color: white;
    background-color: #8bbb4e;
  }
  .aside-top-info .p_active:hover {
    color: white;
    cursor: pointer;
  }
  .aside-top-info .p_active p:hover {
    color: white;
  }
  .aside-top-info div {
    width: 50%;
    height: 100%;
    padding-top: 20px;
    text-align: center;
    font: 16px/30px  "Microsoft YaHei",sans-serif;
    color: #333333;
    float: left;
  }
  .aside-top-info span {
    font: 14px/20px "Microsoft YaHei",sans-serif;
  }

  .aside-bottom-info {
    padding-bottom: 40px;
  }
  .aside-bottom-info p{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #edeeef;
    font: 16px/50px  "Microsoft YaHei",sans-serif;
    text-align: center;
  }
  .aside-bottom-info p:hover {
    cursor: pointer;
    color: white;
    background-color: #8bbb4e;
  }
  .aside-bottom-info p.p_active {
    color: white;
    background-color: #8bbb4e;
  }
  .aside-bottom-info p.p_active:hover {

  }
    /* 共有 */
  .aside span {
    display: inline-block;
    background-color: deepSkyblue;
    padding: 0 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    min-width: 15px;
    color: white;
    font: 14px/20px "simhei";
  }
  .aside-bottom-info span {
    float: right;
    margin: 15px 20px;
  }
  /* aside结束 */

  /* .info 与 content共有开始 */
  .top-introduce,.content{
    width: calc(100% - 260px);
    margin-bottom: 10px;
  }
  .user-content {
    width: calc(100% - 500px);
    margin: 30px 120px;
  }
  /* .info 与 content共有结束 */

  /* .top 开始 */
  .top-introduce {
    height: 160px;
    overflow: hidden;
  }
  /* info */
  .top-introduce>.user-info {
    float: left;
    overflow: hidden;
    width: calc(100% - 140px);
  }
  .top-introduce .user-info-left {
    float: left;
    position: relative;
    width: 120px;
    height: 120px;
    margin: 20px;
  }
  .top-introduce .user-info-left img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
  }
  .top-introduce .user-info-left span {
    position: absolute;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    text-align: center;
    line-height: 30px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #92c452;
    color: white;
  }
  .top-introduce .user-info-right {
    float: left;
    margin: 20px 0;
    height: 120px;
  }
  .top-introduce .user-info-right p {
    height: 40px;
    font: 16px/40px "Microsoft YaHei",sans-serif;
  }

  .top-introduce  .user-info-right .username {
    font-weight: 600;
    font-size: 18px;
  }
  .user-info-right .user-introduce {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .user-info-right .integral {
    color: deepSkyblue;
  }
  .user-info-right .integral:hover {
    cursor: pointer;
    color: #00a1d7;
  }
  /* change*/
  .top-introduce .user-change {
    float: right;
    height: 120px;
    width: 120px;
    text-align: center;
    color: #92c452;
    font: 16px "Microsoft YaHei",sans-serif;
    padding: 25px 0;
    margin-right: 20px;
  }
  .top-introduce .user-change p{
    line-height: 40px;
    border: 1px solid #92c452;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .top-introduce .user-change p:first-child {
    margin-bottom: 20px;
  }
  .top-introduce .user-change p:hover {
    cursor: pointer;
    background-color: #92c452;
    color: white;
  }
  /* .top 结束 */

  /* content开始 */
  /* content结束 */

   /* content开始 */
  .content-wrap {
    float: right;
    width: 100%;
  }
  /* content结束 */
</style>
